<template>
  <div class="line-chart-container">
    <!-- 空数据提示 -->
    <div v-if="isEmptyData" class="empty-tip">暂无数据</div>
    <!-- ECharts 容器 -->
    <div :id="chartId" class="chart-content" v-else></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { debounce } from 'lodash';

export default {
  name: "LineChart",
  props: {
    // 图表数据：对象数组，每个对象需包含 xAxis（横轴值）和 seriesData（系列值）
    chartData: {
      type: Array,
      required: true,
      // 默认空数组（更合理的默认值，避免无数据时显示冗余默认项）
      default: () => [],
      // 严格验证数据格式：必须是对象数组，且每个对象包含 xAxis 和 seriesData
      validator: (value) => {
        return Array.isArray(value) && value.every(item => {
          return item && typeof item === 'object' && 
                 'xAxis' in item && 'seriesData' in item;
        });
      }
    },
    // 图表标题
    title: { type: String, default: "" },
    // y轴名称
    yAxisName: { type: String, default: "" },
    // 图表唯一ID
    chartId: { type: String, default: () => `line-chart-${Date.now()}` },
    // 可配置项：增强灵活性
    showArea: { type: Boolean, default: true }, // 是否显示区域填充
    lineColor: { type: String, default: "#90EE90" }, // 折线颜色
    lineWidth: { type: Number, default: 2 }, // 折线宽度
    smooth: { type: Boolean, default: false }, // 是否平滑曲线
    symbolSize: { type: Number, default: 6 }, // 标记点大小
    showSymbol: { type: Boolean, default: true }, // 是否显示标记点
    // 空数据提示文字
    emptyText: { type: String, default: "暂无数据" }
  },
  computed: {
    // 判断是否为空数据（数组为空或所有seriesData无效）
    isEmptyData() {
      if (!Array.isArray(this.chartData) || this.chartData.length === 0) return true;
      return this.chartData.every(item => {
        const val = this.formatSeriesData(item.seriesData);
        return isNaN(val) || val === null;
      });
    }
  },
  data() {
    return {
      myChart: null,
      resizeHandler: null
    };
  },
  mounted() {
    // 确保DOM渲染完成后初始化图表
    this.$nextTick(() => {
      if (!this.isEmptyData) {
        this.initChart();
      }
      this.initResizeListener();
    });
  },
  watch: {
    // 深度监听数据变化（包括数组项修改、新增/删除）
    chartData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          if (this.isEmptyData) {
            // 空数据时销毁图表
            this.destroyChart();
          } else {
            // 非空数据时更新/初始化图表
            if (this.myChart) {
              this.updateChart();
            } else {
              this.initChart();
            }
          }
        });
      }
    },
    // 监听配置项变化，实时更新图表
    lineColor() { this.updateChart(); },
    lineWidth() { this.updateChart(); },
    smooth() { this.updateChart(); },
    symbolSize() { this.updateChart(); },
    showSymbol() { this.updateChart(); },
    showArea() { this.updateChart(); },
    title() { this.updateChart(); },
    yAxisName() { this.updateChart(); }
  },
  beforeDestroy() {
    this.destroyChart();
    this.removeResizeListener();
  },
  methods: {
    // 初始化图表
    initChart() {
      const chartDom = document.getElementById(this.chartId);
      if (!chartDom) return;
      // 销毁已有实例（避免重复初始化）
      if (this.myChart) this.myChart.dispose();
      this.myChart = echarts.init(chartDom);
      this.updateChart();
    },
    // 更新图表数据和配置
    updateChart() {
      if (!this.myChart || this.isEmptyData) return;

      // 处理x轴数据（容错：空值显示为“未知”）
      const xAxisData = this.chartData.map(item => {
        return item.xAxis || "未知";
      });

      // 处理系列数据（容错：非数字转换为0，保留有效数字）
      const seriesData = this.chartData.map(item => {
        return this.formatSeriesData(item.seriesData);
      });

      const option = {
        title: {
          text: this.title,
          left: "left",
          textStyle: { color: "#fff", fontSize: 16 }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
          backgroundColor: "rgba(0,0,0,0.7)",
          padding: 10,
          // 自定义tooltip内容：显示完整字段名和值
          formatter: ({ axisIndex, dataIndex }) => {
            const xVal = xAxisData[dataIndex];
            const yVal = seriesData[dataIndex];
            return `
              <div style="color:#fff">
                <div>${this.title || "数据"}</div>
                <div>横轴：${xVal}</div>
                <div>纵轴：${yVal} ${this.yAxisName ? `(${this.yAxisName})` : ""}</div>
              </div>
            `;
          }
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLine: { lineStyle: { color: "#ccc" } },
          axisLabel: {
            color: "#fff",
            fontSize: 14,
            // 自动旋转避免标签重叠
            rotate: xAxisData.length > 6 ? 30 : 0,
            interval: 0
          }
        },
        yAxis: {
          type: "value",
          name: this.yAxisName,
          nameGap: 20,
          nameTextStyle: { color: "#fff", fontSize: 14 },
          axisLine: { lineStyle: { color: "#ccc" } },
          axisLabel: { color: "#fff", fontSize: 14 },
          splitLine: { show: false }
        },
        series: [{
          name: this.title || "数据",
          type: "line",
          data: seriesData,
          smooth: this.smooth,
          lineStyle: { color: this.lineColor, width: this.lineWidth },
          symbol: this.showSymbol ? "circle" : "none",
          symbolSize: this.symbolSize,
          itemStyle: { color: this.lineColor },
          // 条件显示区域填充
          areaStyle: this.showArea ? {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: `${this.lineColor}33` }, // 带透明度的填充色
              { offset: 1, color: `${this.lineColor}00` }
            ])
          } : undefined
        }],
        grid: {
          left: "5%",
          right: "5%",
          top: this.title ? "15%" : "5%", // 有标题时增加顶部距离
          bottom: "10%",
          containLabel: true
        }
      };

      this.myChart.setOption(option);
    },
    // 销毁图表实例
    destroyChart() {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
    },
    // 初始化窗口resize监听
    initResizeListener() {
      this.resizeHandler = debounce(() => {
        if (this.myChart) this.myChart.resize();
      }, 100);
      window.addEventListener("resize", this.resizeHandler);
    },
    // 移除窗口resize监听
    removeResizeListener() {
      if (this.resizeHandler) {
        window.removeEventListener("resize", this.resizeHandler);
        this.resizeHandler = null;
      }
    },
    // 格式化系列数据：确保为有效数字
    formatSeriesData(val) {
      // 转换为数字，无效值返回0
      const num = Number(val);
      return isNaN(num) ? 0 : num;
    }
  }
};
</script>

<style scoped>
.line-chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px; /* 基础高度，可外部覆盖 */
  position: relative;
  box-sizing: border-box;
}

.chart-content {
  width: 100%;
  height: 100%;
}

/* 空数据提示样式 */
.empty-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 14px;
  text-align: center;
}
</style>